import React from "react";
import { Icon, message, Upload } from "antd";
import "./style.scss";

const { Dragger } = Upload;

class BatchUpload extends React.Component {
    render() {
        const props = {
            name: "file",
            multiple: true,
            action: "https://www.mocky.io/v2/5cc8019d300000980a055e76",
            onChange(info) {
                const { status } = info.file;
                if (status !== "uploading") {
                    console.log(info.file, info.fileList);
                }
                if (status === "done") {
                    message.success(`${info.file.name} file uploaded successfully.`);
                } else if (status === "error") {
                    message.error(`${info.file.name} file upload failed.`);
                }
            }
        };

        return (
            <div className="PMW-add-upload">
                <div className="upload-header">
                    <span>上传导入文件</span>
                    <span className="upload-model">
                        <a href="#">下载模板文件</a>
                    </span>
                </div>
                <div className="upload-content">
                    <Dragger {...props}>
                        <p className="ant-upload-drag-icon">
                            <Icon type="inbox" />
                        </p>
                        <p className="ant-upload-text">Click or drag file to this area to upload</p>
                        <p className="ant-upload-hint">
                            Support for a single or bulk upload. Strictly prohibit from uploading company data or other
                            band files
                        </p>
                    </Dragger>
                </div>
            </div>
        );
    }
}

export default BatchUpload;
